x

ما هي لغة CSS ؟

ما هي CSS المضمَّنة والداخلية والخارجية، ومتى ينبغي استخدام كلٍّ منها؟

نظري

يمكن تطبيق CSS على صفحة الويب بثلاث طرق رئيسية: مضمنة (inline)، أو داخلية (internal)، أو خارجية (external).

لكل طريقة حالات استخدام ومزايا وقيود خاصة بها، وتُعد معرفة متى ينبغي استخدام كل منها أمراً جوهرياً لكتابة "شيفرة برمجية نظيفة وفعالة وسهلة الصيانة" (clean, efficient, and maintainable code).

لنستعرض أنواع CSS الثلاثة ومتى ينبغي استخدامها.

تُكتب لغة CSS المضمنة (Inline CSS) مباشرةً داخل عنصر HTML باستخدام السمة style ; حيث تُطبِّق التنسيقات على عنصر محدد.

إليك مثال يستخدم CSS المضمنة (inline CSS) : 


<p style="color: green;">هذه فقرة ذات تنسيق مُضمَّن.</p>

معاينة:


في هذا المثال، نستخدم السمة style لضبط لون نص الفقرة على الأخضر green .

تُستخدم لغة CSS المضمنة (Inline CSS) عادةً لتطبيق أنماط سريعة ومحددة لمرة واحدة، أو لتجاوز أنماط أخرى خاصة بعنصر معين.

ومع ذلك، ينبغي تجنب ذلك في معظم الحالات; لأنه قد يؤدي إلى "تكدس" (clutter) كود HTML وجعل صيانته أكثر صعوبة.

في معظم الحالات، يُفضل استخدام CSS داخلية أو خارجية (internal or external) للحفاظ على تنظيم الأنماط وتسهيل صيانتها.

تُكتب لغة CSS الداخلية (Internal CSS) داخل وسوم style في قسم head من مستند HTML ; وهي تُطبِّق التنسيقات على الصفحة بأكملها، وتُعد مفيدةً عندما تحتاج إلى تنسيق مستندٍ واحدٍ فقط.

إليك مثال على CSS الداخلي (internal CSS) :


<head>
 <style>
  p {
   color: blue;
  }
 </style>
</head>
<body>
 <p>تم تنسيق هذه الفقرة باستخدام CSS داخلي (internal CSS).</p>
</body>

معاينة:


في المثال أعلاه، يقوم نظام CSS الداخلي بتطبيق نص أزرق على جميع عناصر p في الصفحة.

يُعد استخدام CSS الداخلي (Internal CSS) الخيار الأمثل عندما تحتاج إلى تطبيق أنماط على صفحة محددة بدلاً من تطبيقها على صفحات متعددة; فهو مفيد للمواقع المكونة من صفحة واحدة أو في الحالات التي لا تتطلب إعادة استخدام تلك الأنماط في أماكن أخرى.

ومع ذلك، ثمة بعض السلبيات، مثل عدم دعم إمكانية إعادة الاستخدام عبر صفحات متعددة. وعلاوة على ذلك، فهو - شأنه شأن تنسيق CSS المضمّن (inline CSS) - يدمج بين HTML و CSS, مما يجعل صيانة الكود أكثر صعوبة في المشاريع الكبيرة.

تُكتب ملفات CSS الخارجية (External CSS) في ملف منفصل بامتداد .css , وتُربط بمستند HTML باستخدام عنصر link في قسم head .

يتيح لك تنسيق صفحات متعددة بشكل متسق، ويُعد الأسلوب المفضل في مجال تطوير الويب الاحترافي (professional web development) .

إليك مثال على تنسيق جميع عناصر الفقرة:

index.html


<head>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <p>تم تنسيق هذه الفقرة باستخدام ملف CSS خارجي (external CSS).</p>
</body>

styles.css


 p {
 color: red;
}

معاينة:


في درس سابق، تعلّمت أن عنصر link يحتوي على السمة rel التي تحدد العلاقة بين المستند الحالي والمورد المرتبط به، مثل الربط بملف أنماط (stylesheet) أو مورد خارجي.

من ناحية أخرى، تحدد السمة href عنوان URL للمورد المرتبط، مشيرةً إلى المكان الذي ينبغي جلب المورد منه.

تُعد ملفات CSS الخارجية مثالية للمشاريع الكبيرة التي ترغب فيها بالحفاظ على نمط متسق عبر صفحات متعددة.

يعزز هذا النهج مبدأ "فصل الاهتمامات" (separation of concerns) من خلال جعل HTML تتولى مسؤولية الهيكلة وCSS تتولى مسؤولية التنسيق، مما يجعل الكود البرمجي أسهل في الصيانة وأكثر قابلية للتوسع.

يُعد فهم متى يجب استخدام كل نوع من أنواع CSS أمراً بالغ الأهمية لتطوير الويب بكفاءة وفعالية.

في معظم الحالات، ينبغي أن يكون استخدام ملفات CSS الخارجية هو خيارك المفضل، لا سيما في المشاريع الكبيرة والأكثر تعقيداً.

أسئلة :

متى يكون استخدام CSS المضمن (Inline CSS) هو الخيار الأنسب؟

1. لتنسيق جميع الفقرات في المستند. ❌

2. لتجاوز التنسيقات بسرعة على عنصر واحد. ✅

3. لتنسيق موقع ويب بالكامل. ❌

4. للفصل بين المهام في المشاريع الكبيرة. ❌


أي نوع من أنواع CSS هو الأنسب لتطبيق الأنماط على صفحة ويب واحدة فقط؟

1. سي.اس.اس مضمّن (Inline CSS). ❌

2. سي.اس.اس خارجي (External CSS). ❌

3. سي.اس.اس داخلي (Internal CSS). ✅

4. سي.اس.اس عام (Universal CSS). ❌


لماذا يُفضَّل استخدام ملفات CSS الخارجية (External CSS) في المشاريع الكبيرة؟

1. يسمح بإجراء تغييرات سريعة ومؤقتة على الأنماط. ❌

2. يطبّق الأنماط على عنصر محدد فقط. ❌

3. يعزز مبدأ فصل المهام وإمكانية إعادة الاستخدام عبر صفحات متعددة. ✅

4. يجعل كود HTML أكثر تعقيداً. ❌